

// 导航栏的切换
function exchangeClass(selector, className) {
    $(function(){
        let items = $(selector)
        items.each(function(index){
            $(this).click(function(){
                $(this).click(function(){
                    items.each(function(){
                        $(this).removeClass(className)
                    })
                    $(this).addClass(className)
                })
            })
        })
    })
}

exchangeClass("#head .secondary li", "active")

// 账户信息的悬浮显示与隐藏
$(document).ready(function(){
    $("#down").hover(function(){
        $("#account").show()
    })
    $("#account").hover(function(){
        $("#account").show()
    }, function(){
        $("#account").hide()
    })
  })

let headVue = Vue.createApp({
    // 定义组件
    components:{
        'horizontal-nav': HORIZONTAL_NAV,
        'left-nav': LEFT_NAV
    },
    // 初始化
    setup(){
        // reactive定义变量运行存储
        // toRefs将数据返回
        const {
            reactive, toRefs
        } = Vue
        // 定义变量，即所需数据
        const state = reactive({
            mainMenu:[
                {name: "发现"},
                {name: "专题"},
                {name: "关注"},
                {
                    name: "消息",
                    count: 22
                },

            ],
            accountMenu:[
                {
                    name: "我的",
                    icon: 'user icon'
                },
                {
                    name: "喜欢",
                    icon: 'heart icon'
                },
                {
                    name: "钱包",
                    icon: 'user icon',
                    href: "/wallet/",
                },
                {
                    name: "观星",
                    icon: 'chart line icon',
                    href: "/analysis"
                },
                {
                    name: "设置",
                    icon: 'setting icon',
                    href: "/setting"
                },
                {
                    name: "退出",
                    icon: 'sign-out icon',
                    href: "/login"
                }

            ],
            user: {},
            searchHistory: [],
            searchHistoryCopy: [],
            searchRecommend: [],
            searchRecommendCopy: [],
            searchContent: ""
        })
        let that = state
        get("/loginUser", function(data){
            console.log(data);
            that.user = data
            that.accountMenu[0].href =  "/user/" + data.userId
            that.accountMenu[1].href =  "/user/" + data.userId
            // 对于管理员，添加一个后台管理选项
            that.accountMenu.unshift({
                name: "管理",
                icon: 'ul list icon',
                href: "/bgAdm"
            })
        })
        get("/searchHistory/searchByUserId", function(data) {
            state.searchHistory = data
            state.searchHistoryCopy = data
        })
        get("/getRecommendKw/1/10", function(data) {
            state.searchRecommend = data
            state.searchRecommendCopy = data
        })
        // 搜索
        $(function() {
            let searchBtn = $("#head #searchInput")
            $(searchBtn).click(function(e){
                // 其他页面点击将会返回首页
                let href = location.href.split("/")
                let home = href[href.length - 1].split("#")[0]
                if (home != "home") {
                    location.href = "/home"
                }
            })
        })
        // 返回数据
        return {
            ...toRefs(state)
        }
    },
    methods:{
        resetMessageCount:function(){
            // 修改头部导航栏的消息数量
            $(function(){
                let message = $("#head #messageCount")
                message.html(0)
                message.hide()
            })
        },
        setShowIndex() {
            // 其他页面点击将会返回首页
            let href = location.href.split("/")
            let home = href[href.length - 1].split("#")[0]
            if (home != "home") {
                location.href = "/home"
            }
        },
        setSearchContent(content) {
            this.searchContent = content
            // $("#head #searchInput").val(content)
        },
        // 删除搜索历史
        deleteSearchHistory(index) {
            get("/searchHistory/delete/" + this.searchHistory[index].searchHistoryId)
            this.searchHistory.splice(index, 1)
        },
        // 删除推荐搜索
        deleteSearchRecommend(index) {
            this.searchRecommend.splice(index, 1)
        }
    },
    // 监听搜索内容，更新搜索推荐
    watch : {
        searchContent:function(val) {
            let search = this.searchContent
            this.searchHistory = this.searchHistoryCopy.filter(e => {
                if (e.content.indexOf(search) != -1) {
                    return e
                }
            })
            this.searchRecommend = this.searchRecommendCopy.filter(e => {
                if (e.indexOf(search) != -1) {
                    return e
                }
            })
        }
    }
    // 绑定app
}).mount("#head")